<template>
  <div>
    <el-container class="left">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button class="left" plain type="primary" @click="handleEdit()">添加分类</el-button>
    </el-container>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form ref="editForm" :model="editForm" label-width="120px">
        <el-form-item label="分类名称" prop="classification">
          <el-input v-model="editForm.classification" auto-complete="off" placeholder="请输入分类名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="editForm.remarks" auto-complete="off" placeholder="" size="small"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button :loading="loading" class="title" size="small" type="primary" @click="submitForm('editForm')">保存
        </el-button>
      </div>
    </el-dialog>
    <div class="right">
      <el-button class="left" plain type="primary" @click="handleEdit()">刷新数据</el-button>
      <el-button class="left" plain type="primary" @click="handleEdit()">新增接口</el-button>
      <!--列表-->
      <el-table v-loading="loading" :data="listData" border element-loading-text="拼命加载中" highlight-current-row
                size="small" style="width: 100%;">
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column label="接口名称" prop="roleName" sortable width="300">
        </el-table-column>
        <el-table-column label="接口路径" prop="roleNo" sortable width="300">
        </el-table-column>
        <el-table-column label="接口分类" prop="editTime" sortable width="300">
        </el-table-column>
        <el-table-column label="状态" prop="editUser" sortable width="300">
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import {addSuite} from "../../api/apiAutoMG";

export default {
  name: 'api',
  data() {
    return {
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '新增分类',
      input: '',
      loading: true,
      editForm: {
        classification: '',
        remark: '',
        token: localStorage.getItem('logintoken')
      },

    }
  },
  methods: {

    submitForm(editData) {
      console.log(editForm);
      this.$refs[editData].validate(valid => {
        if (valid) {
          console.log(this.editForm)
          addSuite(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '分类保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('分类保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    handleEdit: function (index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.deptId = row.deptId
        this.editForm.classification = row.classification
        this.editForm.deptNo = row.deptNo
      } else {
        this.title = '添加'
        this.editForm.deptId = ''
        this.editForm.classification = ''
        this.editForm.deptNo = ''
      }
    },
    closeDialog() {
      this.editFormVisible = false
    }
  },
  created() {
    // 监听
    this.$root.Bus.$on('toggle', value => {
      if (value) {
        this.showclass = 'asideshow'
      } else {
        setTimeout(() => {
          this.showclass = 'aside'
        }, 300)
      }
    })
  },
  beforeUpdate() {
  },
  // 挂载前状态(里面是操作)
  beforeMount() {
    // 弹出登录成功
    this.$message({
      message: '登录成功',
      type: 'success'
    })
  }
}
</script>
<style>
.left {
  height: 20%;
  width: 20%;
  float: left;;
}

.right {

  float: right;;
}
</style>
